<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      <router-link :to="{ path: 'dashboard' }">
        <el-link type="primary">网箱信息</el-link>
      </router-link>
      /
      修改
    </div>
    <div class="info-wrapper">
      <p class="info-title">网箱信息</p>
      <div class="info-content">
        <div class="info-box">
          <p class="sub-title">基本信息</p>
          <el-form class="mt10" :model="basicInfo" label-position="right" label-width="100px">
            <el-form-item label="网箱名称:">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="位置信息:">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理者姓名:">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理者照片:">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item label="所有者姓名:">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="所有者照片:">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview2"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible2">
                <img width="100%" :src="dialogImageUrl2" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item label="简介:">
              <el-input style="width: 60%" type="textarea" :rows="4" size="small"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="info-box mt20">
          <p class="sub-title">
            水质信息
            <el-button class="ml10" type="primary" size="small" @click="handleCreate('water')">添加水质信息</el-button>
          </p>
          <el-table
            header-row-class-name="table-list-header"
            row-class-name="table-list-row"
            :data="waterTable"
            class="mt10"
          >
            <el-table-column v-for="item in waterColumns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.prop === 'operation'">
                  <el-link type="primary" @click="editWater('modify', scope.row)">修改</el-link>
                  <el-link type="danger" class="ml10" @click="editWater('delete', scope.row)">删除</el-link>
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="info-box mt20">
          <p class="sub-title">
            投放信息
            <el-button class="ml10" type="primary" size="small" @click="handleCreate('launch')">添加投放信息</el-button>
          </p>
          <el-table
            header-row-class-name="table-list-header"
            row-class-name="table-list-row"
            :data="launchTable"
            class="mt10"
          >
            <el-table-column v-for="item in launchColumns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.prop === 'operation'">
                  <el-link type="primary" @click="editLaunch('modify', scope.row)">修改</el-link>
                  <el-link type="danger" class="ml10" @click="editLaunch('delete', scope.row)">删除</el-link>
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="info-box mt20">
          <!-- 头数、编号范围、购买者 -->
          <p class="sub-title">
            打捞信息
            <el-button class="ml10" type="primary" size="small" @click="handleCreate('catch')">添加打捞信息</el-button>
          </p>
          <el-table
            header-row-class-name="table-list-header"
            row-class-name="table-list-row"
            :data="catchTable"
            class="mt10"
          >
            <el-table-column v-for="item in catchColumns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.prop === 'operation'">
                  <el-link type="primary" @click="editCatch('modify', scope.row)">修改</el-link>
                  <el-link type="danger" class="ml10" @click="editCatch('delete', scope.row)">删除</el-link>
                </template>
                <span v-else-if="item.prop === 'range'">{{ scope.row.rangeStart + '-' + scope.row.rangeEnd  }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="txc mt20">
          <el-button type="primary">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
    <template>
      <EditWater v-if="showEditWater" :row="curWater" :edit-type="waterFlag" @modal-close="handleModalClose" />
      <EditLaunch v-if="showLaunch" :row="curLaunch" :edit-type="launchFlag" @modal-close="handleModalClose" />
      <EditCatch v-if="showCatch" :row="curCatch" :edit-type="catchFlag" @modal-close="handleModalClose" />
    </template>
  </div>
</template>
<script>
import EditWater from '../../components/EditWaterInfo'
import EditLaunch from '../../components/EditLaunch'
import EditCatch from '../../components/EditCatch'
export default {
  components: { EditWater, EditLaunch, EditCatch },
  data () {
    return {
      showCatch: false,
      catchFlag: 'new',
      curCatch: {},
      showLaunch: false,
      curLaunch: {},
      launchFlag: 'new',
      showEditWater: false,
      waterFlag: 'new',
      curWater: {},
      waterColumns: [
        {
          label: '记录日期',
          prop: 'date'
        },
        {
          label: '水温',
          prop: 'temp'
        },
        {
          label: '溶解氧',
          prop: 'ox'
        },
        {
          label: 'PH值',
          prop: 'ph'
        },
        {
          label: '电导率(%)',
          prop: 'electric'
        },
        {
          label: '氨氮含量(%)',
          prop: 'an'
        },
        {
          label: '总有机碳(%)',
          prop: 'carbon'
        },
        {
          label: '浊度(%)',
          prop: 'turbidity'
        },
        {
          label: '操作',
          prop: 'operation',
          width: 200
        }
      ],
      waterTable: [
        {
          id: '20201004001',
          date: '2020-10-04 13:00:00',
          temp: '10',
          ox: '3',
          ph: '7.1',
          electric: '60',
          an: 80,
          carbon: '3',
          turbidity: 30
        }
      ],
      // 种类（包括苗、饲料、药物等下拉菜单）、名称、数量、来源
      launchColumns: [
        {
          label: '投放日期',
          prop: 'date'
        },
        {
          label: '种类',
          prop: 'type'
        },
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '数量',
          prop: 'count'
        },
        {
          label: '来源',
          prop: 'source'
        },
        {
          label: '操作',
          prop: 'operation'
        }
      ],
      launchTable: [
        {
          id: '202010101010',
          date: '2020-10-04 10:00:01',
          type: '苗',
          name: '投放幼苗',
          count: '2000',
          source: '养殖基地'
        }
      ],
      // <!-- 头数、编号范围、购买者 -->÷
      catchColumns: [
        {
          label: '打捞日期',
          prop: 'date'
        },
        {
          label: '头数',
          prop: 'count'
        },
        {
          label: '编号范围',
          prop: 'range'
        }, {
          label: '购买者',
          prop: 'buyer'
        },
        {
          label: '操作',
          prop: 'operation'
        }
      ],
      catchTable: [
        {
          id: '2020100922029',
          date: '2020-10-04 18:00:00',
          count: 20,
          rangeStart: 20200801,
          rangeEnd: 20200909,
          buyer: '周杰伦'
        }
      ],
      basicInfo: {},
      dialogImageUrl: '',
      dialogVisible: false,
      dialogImageUrl2: '',
      dialogVisible2: false
    }
  },
  methods: {
    handleCreate (type) {
      switch (type) {
        case 'water':
          this.waterFlag = 'new'
          this.showEditWater = true
          break
        case 'launch':
          this.launchFlag = 'new'
          this.showLaunch = true
          break
        case 'catch':
          this.catchFlag = 'new'
          this.showCatch = true
          break
        default:
      }
    },
    editCatch (type, data) {
      if (type === 'modify') {
        this.catchFlag = type
        this.curCatch = data
        this.showCatch = true
      }
    },
    editWater (type, data) {
      if (type === 'modify') {
        this.waterFlag = type
        this.curWater = data
        this.showEditWater = true
      }
    },
    editLaunch (type, data) {
      if (type === 'modify') {
        this.launchFlag = type
        this.curLaunch = data
        this.showLaunch = true
      }
    },
    back () {
      this.$router.push('dashboard')
    },
    handleModalClose (info) {
      const { type } = info
      switch (type) {
        case 'waterModal':
          this.showEditWater = false
          break
        case 'launchModal':
          this.showLaunch = false
          break
        case 'catchModal':
          this.showCatch = false
          break
        default:
      }
    },
    handleRemove (file, fileList) {
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePictureCardPreview2 (file) {
      this.dialogImageUrl2 = file.url
      this.dialogVisible2 = true
    }
  }
}
</script>
<style lang="scss">
</style>
